<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
   
		<div class="container-div">
			<div class="animated fadeIn">
				<div class="row">
					<div class="card col-lg-4 tree-card" >
					
						 <div class="box box-main  search-collapse">
							<div class="box-header">
								<div class="box-title">
									<i class="fa fa-chrome"></i> 添加按钮
								</div>
							</div>
							<div class="ui-layout-content">
								  <br/>	
								  <form class="form-horizontal" id="addForm" style="float:left;width:100%">
								  
								  	<input type="hidden" id="resourceParent" name="resourceParent" th:value="${menuId}" />
								  	<input type="hidden" id="id" name="id" />
								  	
									<!-- 过滤条件_start -->
									<input type="hidden" id="resourceParent" name="condition[resourceParent]" th:value="${menuId}" />
									<input type="hidden" id="resourceOrder" name="condition[resourceOrder|orderBy]" value="true" />
									<input type="hidden" id="showBtn" name="showBtn" value="true" />
									<!-- 过滤条件_end -->
								  	
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label control-label" for="text-input">名称</label>
										<div class="col-md-9">
											<input class="form-control" id="text-input" type="text" name="resourceName" placeholder="名称">
										</div>
									</div>
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label control-label" for="email-input">图标</label>
										<div class="col-md-9">
											<span class="form-control" id="resourceIconLabel" style="cursor:pointer;" readonly="readonly" onclick="showIcons()">菜单图标</span>
											<input type="hidden" id="resourceIcon" name="resourceIcon" />
										</div>
									</div>
									
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label control-label" for="email-input">标识</label>
										<div class="col-md-9">
											<input class="form-control" id="email-input" type="email" name="permission" placeholder="权限标识">
										</div>
									</div>
									
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label control-label" for="email-input">脚本</label>
										<div class="col-md-9">
											<input class="form-control" id="email-input" type="email" name="permissionScript" placeholder="脚本">
										</div>
									</div>
									
									<div class="form-group row margin-right-0">
										<label class="col-md-3 col-form-label control-label" for="email-input">排序</label>
										<div class="col-md-9">
											<input class="form-control" id="email-input" type="number" name="resourceOrder" placeholder="排序">
										</div>
									</div>
									
									<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="button" class="btn btn-block btn-primary" onclick="submitAjax()"><i class="fa fa-check"></i>保 存</button>&nbsp;
									</div>
								</div>
								</form>
							</div>
						</div>
					</div>
					<div class="col-lg-8">
						<div class="col-sm-12 select-table table-striped">
							
							<table id="bootstrap-table" data-mobile-responsive="true"></table>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	<script th:src="@{/resources/js/common.js}"></script>	
	
	<script>
		var prefix = ctx+"boot/platform/menus/" ;

		$(function() {
		    var options = {
		        url: prefix+"datatables" ,
		        createUrl: prefix + "add" ,
		        updateUrl: prefix+"modify?id={id}" ,
		        statusUrl: prefix+"changeStatus?id={id}" , 
		        cleanUrl: prefix + "clean",
		        detailUrl: prefix+"detail?id={id}",
		        removeUrl: prefix+"delete" ,
		        exportUrl: prefix + "export",
		        sortName: "operTime",
		        uniqueId:"id" ,
		        sortOrder: "desc",
		        modalName: "菜单",
		        escape: true,
		        showPageGo: false ,
		        rememberSelected: true,
		        columns: [{field: 'state',checkbox: true },
			        {field: 'resourceIcon', width:'30px', title: '图标' , align: 'center',  formatter: function(value, row, index) {
			                var actions = [];
			                actions.push('<i class="fa '+value+'" aria-hidden="true">');
			                return actions.join('');
			          }
			        },
			        {field: 'resourceName', width:'10%', title: '名称'},
			        {field: 'permission', width:'20%', title: '标识'},
			        {field: 'permissionScript', width:'20%', title: '脚本'},
			        {field: 'resourceOrder', width:'5%', align:'center', title: '排序'},
			        {field: 'hasStatusLabel', width:'10%', title: '状态', align: 'center',  formatter:function(value,row,index){ return $.table.status(value , row);}},
			        {field: 'updateTime' , width:'20%', title: '操作',  align: 'center',  formatter: function(value, row, index) {
			                var actions = [];
			                
			                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editButton(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
			                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="far fa-trash-alt"></i>删除</a> ');
			                
			                return actions.join('');
			          }
			     }]
		    };
		    $.table.init(options);
		});
		
		// 保存按钮	
		function submitAjax(){
	    	$.operate.saveModal(prefix + "buttonSave", $('#addForm').serialize() , function(response){
	    		if(response.code == 200){ // 如果返回为200,则刷新表单
	    			$.table.search() ;
	    		}
	    	});
	    }
	
		// 编辑菜单 
		function editButton(_id){
			console.log("id = " + _id) ; 
			$.get(prefix+"getOne?id="+_id , function(response){
				$("input[name=id]").val(response.id) ; 
				$("input[name=resourceName]").val(response.resourceName) ; 
				$("input[name=permission]").val(response.permission) ; 
				$("input[name=resourceOrder]").val(response.resourceOrder) ; 
				$("input[name=resourceIcon]").val(response.resourceIcon) ; 
			},"JSON") ; 
		}
		
	</script>

</body>
</html>
